<template>
  <div>
    <el-table :data="tabdata" style="width: 100%" footer-row-class-name="hide">
      <el-table-column prop="id" label="编号" minWidth="80" show-overflow-tooltip>

      </el-table-column>
      <el-table-column prop="noticeType" label="通知方式" show-overflow-tooltip minWidth="80">
        <template v-slot="{ row }">
          {{ isNullOrEmpty( NOTIFICATIONTYPE[row.noticeType] ) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" show-overflow-tooltip label="通知状态" minWidth="80">
        <template v-slot="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'danger'">
            {{ isNullOrEmpty(NOTIFICATIONSTATUSTEXT[row.status]?.label) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="failMessage" label="失败原因" show-overflow-tooltip minWidth="120">
        <template v-slot="{ row }">
          {{ isNullOrEmpty(row?.failMessage) }}
        </template>
      </el-table-column>
      <el-table-column prop="content" label="通知内容" show-overflow-tooltip minWidth="180">
      </el-table-column>
      <el-table-column prop="createdAt" label="通知时间" show-overflow-tooltip minWidth="180">
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import {isNullOrEmpty} from '@/utils/functions'
import { ref, reactive, onMounted } from "vue";
import { NOTIFICATIONSTATUSTEXT, NOTIFICATIONTYPE } from "@/constant/alarm-mangenment";
import { getAlarmRecordListOps } from "@/api/screen/index";
const props = defineProps({
  id: {
    type: String,
    default: () => '',
  },
});
const tabdata = ref([]);
onMounted(() => {
  getAlarmRecordListOps({ alarmId: props.id }).then(res => {
    tabdata.value = res.result.data;
  });
});
</script>
